<template>
	<div>
		<div class="flex justify-between items-center">
			<div class="flex gap-2 items-center">
				<!-- ModelList component removed as it was only used in preview mode -->
			</div>
		</div>

		<el-table
			:data="markerList"
			style="width: 100%"
			:border="false"
			size="large"
			row-class-name="hover:bg-gray-50 border-b border-gray-100"
			header-row-class-name="bg-gray-50 text-gray-700 font-medium"
			class="rounded-lg shadow-sm table-with-border"
		>
			<el-table-column prop="label" label="序号" width="80" align="center">
				<template #default="{ $index }">
					<el-tag size="small" effect="dark" round class="px-3 shadow-sm">{{ $index + 1 }}</el-tag>
				</template>
			</el-table-column>

			<el-table-column prop="name" label="属性" width="120" align="center">
				<template #default="{ row }">
					<el-input v-model="row.name" placeholder="请输入属性名" size="small" @change="handleDataChange(row)" />
				</template>
			</el-table-column>

			<el-table-column label="描述" min-width="200" align="left">
				<template #default="{ row }">
					<el-input v-model="row.description" type="textarea" :rows="2" placeholder="请输入描述" size="small" @change="handleDataChange(row)" />
				</template>
			</el-table-column>

			<el-table-column label="操作" width="80" fixed="right" align="center">
				<template #default="{ row }">
					<el-button type="danger" text size="small" @click="handleDelete(row)">删除</el-button>
				</template>
			</el-table-column>

			<template #empty>
				<div class="flex flex-col justify-center items-center py-6">
					<el-icon class="mb-2 text-3xl text-gray-300"><InfoFilled /></el-icon>
					<span class="text-gray-400">暂无数据</span>
				</div>
			</template>
		</el-table>
	</div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
import { ElTable, ElTableColumn, ElButton, ElMessage, ElMessageBox, ElInput } from 'element-plus';
import { InfoFilled } from '@element-plus/icons-vue';

interface Props {
	markerList: Array<any>;
}

defineProps<Props>();

const emit = defineEmits<{
	(e: 'removeMarker', id: number): void;
	(e: 'editMarker', marker: any): void;
}>();

function handleDelete(row: any) {
	ElMessageBox.confirm('确认删除该标记吗？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		emit('removeMarker', row.id);
		ElMessage.success('删除成功');
	});
}

// 处理数据变化
function handleDataChange(row: any) {
	if (!row.name || !row.description) {
		ElMessage.warning('属性名和描述不能为空');
		return;
	}

	emit('editMarker', { ...row });
}
</script>

<style scoped>
.el-table {
	--el-table-border: none;
	--el-table-header-bg-color: #f9fafb;
	--el-table-row-hover-bg-color: #f3f4f6;
}

.table-with-border {
	border: 1px solid #e5e7eb;
	overflow: hidden;
}

.table-with-border :deep(.el-table__header) {
	border-bottom: 1px solid #e5e7eb;
}
</style>
